<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>一级库查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>


    <style>

        a, button {
            cursor: pointer;
        }


    </style>

</head>
<body style="background-color: #F8F8F8;">
<div>


    <!--    顶部导航-->
    <div class="layui-header" style="background-color: #23262E;">
        <ul class="layui-nav layui-layout-left" style="background-color: #23262E">
            <li class="layui-nav-item"><a onclick="window.location.href='/index?account='+ getQueryVariable('account')">主页</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="javascript:;">一级库</a>
                <dl class="layui-nav-child">
                    <dd><a onclick="window.location.href='/addCenter?account='+ getQueryVariable('account')">入库
                    </a></dd>
                    <dd><a onclick="window.location.href='/queryCenter?account='+ getQueryVariable('account')">查询</a>
                    </dd>
                    <dd><a onclick="window.location.href='/outCenter?account='+ getQueryVariable('account')">出库申请</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">二级库</a>
                <dl class="layui-nav-child" id="nav">
                    <dd><a onclick="window.location.href='/queryAssist?account='+ getQueryVariable('account')">查询</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: #23262E">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.account}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>

    <div class="layui-layout layui-layout-admin">
        <div class="layui-body layui-card-body layui-card" style="background-color: #F8F8F8;position: absolute;left: 0;right: 0;top: 0;bottom:
         0;overflow-y:hidden">
            <div style="display: flex;padding: 20px;margin-top: 50px">
                <div style="width: 100%">

                    <div class="animated slideInUp" style="padding: 20px;text-align: center;margin-bottom: 10px">
                        <span style="font-size: 30px;">一级库-查询页</span>
                    </div>

                    <div class="animated slideInUp" style="padding: 0 0 10px 10px;width: 40%;display: flex">
                        <input id="query" style="width: 85%;height: 25px;padding-left: 8px" type="text"
                               placeholder="查询品名或流水号">
                        <button onclick="initPage()"
                                style="width: 10%;margin-left: 10px;font-size: 13px;border: none;background-color:
                        #000000;color: white;"
                                type="button">查询
                        </button>
                    </div>

                    <div class="animated slideInUp">
                        <table class="layui-table">
                            <colgroup>
                                <col width="250">
                                <col width="250">
                                <col width="250">
                                <col width="100">
                                <col width="80">
                                <col width="170">
                                <col width="120">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>流水号</th>
                                <th>品名</th>
                                <th>规格</th>
                                <th>单位</th>
                                <th>数量</th>
                                <th>入库时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="centerTab">

                            </tbody>
                        </table>
                        <div id="page"></div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    var laypage;
    $(function () {
        layui.use(['element', 'form', 'table', 'layer', 'laypage'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            laypage = layui.laypage;
            loadNav();
            initPage();
        });
    });

    function initPage() {
        let count = countFunc();
        laypage.render({
            elem: 'page',
            count: count, //数据总数
            limit: 7,
            jump: function (obj, first) {
                loadCenter(obj.curr, obj.limit);//当前页 //每页显示的条数
            }
        });
    }

    function countFunc() {
        let query = $("#query").val();
        let count = 0;
        $.ajax({
            url: '/storeController/countCenter',
            data: {query},
            async: false,
            type: 'get',
            contentType: 'application/json',
            success: function (resp) {
                count = resp.data;
            }
        });
        return count;
    }

    function loadCenter(curr, limit) {
        let query = $("#query").val();
        let centerTab = $("#centerTab");
        centerTab.empty();
        $.ajax({
            url: '/storeController/loadCenter',
            data: {query: query, curr: curr, limit: limit},
            async: false,
            type: 'get',
            contentType: 'application/json',
            success: function (resp) {
                if (resp.code == 0) {
                    $.each(resp.data, function (index, item) {
                        centerTab.append("              <tr>" +
                            "                                <td>" + item.id + "</td>" +
                            "                                <td>" + item.name + "</td>" +
                            "                                <td>" + item.spec + "</td>" +
                            "                                <td>" + item.unit + "</td>" +
                            "                                <td>" + item.num + "</td>" +
                            "                                <td>" + item.createTime + "</td>" +
                            "                                <td><div id='" + item.id + "' style='display: flex'>" +
                            "                                         <button onclick='modifyCenter(this)' style='position: relative;left: 3px' class='layui-btn layui-btn-sm layui-btn-primary'>修改</button>" +
                            "                                         <button onclick='outCenter(this)' class='layui-btn layui-btn-sm layui-btn-danger'>出库所有</button>" +
                            "                                    </div>" +
                            "                               </td>" +
                            "                            </tr>")
                    });
                } else {
                    layer.msg(resp.msg);
                }
                // refreshPage(count);
            }
        });
    }

    function modifyCenter(e) {
        let id = $(e).parent().attr("id");
        window.location.href = "/addCenter?type=modify&id=" + id +"&account="+ getQueryVariable("account");
    }

    function outCenter(e) {
        let id = $(e).parent().attr("id");
        $.ajax({
            url: '/storeController/outCenter',
            data: {id:id},
            async: false,
            type: 'get',
            contentType: 'application/json',
            success: function (resp) {
                layer.msg(resp.msg);
                setTimeout(() => run(), 1800);

                async function run() {
                    await setTimeout;
                    window.location.reload();
                }
            }
        });
    }


</script>
</body>
</html>